<template>
  <div class="alarmRules">
    <div class="nav">
      <el-menu
        :default-active="active"
        class="el-menu-vertical-demo"

        background-color="#313261"
        text-color="#fff"
        active-text-color="#fff"
        :collapse="isCollapse"
      >
     
      <template v-for="item in activeMenuList">
        <!-- 多层级菜单 -->
        <el-submenu
          :index="item.id"
          :key="item.id"
          v-if="item.children && item.children.length"
        >
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>{{ item.name }}</span>
          </template>
          <!-- 3级菜单 -->
          <template v-for="item1 in item.children">
            <el-submenu
              :index="item1.id"
              :key="item1.id"
              v-if="item1.children && item1.children.length"
            >
              <template slot="title">{{ item1.name }}</template>
              <el-menu-item
                :index="item2.id"
                :key="item2.id"
                v-for="item2 in item1.children"
                @click="checkMenu(item2)"
                >{{ item2.name }}</el-menu-item
              >
            </el-submenu>
            <!-- 二级 -->
            <el-menu-item
              @click="checkMenu(item1)"
              :index="item1.id"
              :key="item1.id"
            
              v-else
              >{{ item1.name }}</el-menu-item
            >
          </template>
        </el-submenu>

        <!-- 一级菜单 -->
        <el-menu-item
          :index="item.id"
          :key="item.id"
          @click="checkMenu(item)"
          v-else
        >
        <i class="el-icon-location"></i>
            <span>{{ item.name }}</span>
          <!-- <i class="iconfont icon-home"></i>
          <span slot="title">{{ item.name }}</span> -->
        </el-menu-item>
      </template>
      </el-menu>
      <div class="flexible" ref="flexible">
        <div
          class="method"
          @click="flexibleChange('spread')"
          v-if="isCollapse == true"
        >
          <img src="@/assets/images/nav/spread.png" alt="" />
        </div>
        <div
          class="method"
          @click="flexibleChange('pickUp')"
          v-if="isCollapse == false"
        >
          <img src="@/assets/images/nav/pickUp.png" alt="" />
        </div>
      </div>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { userMenuAuth } from "@/api/account";
export default {
  name: "IndexBg",
  data() {
    return {
      isCollapse: false,
      // menuList: [],
      active: "",
    };
  },

  mounted() {
    this.getMenuList();
  },

  props:['menuList','activeKey','activeMenuList'],
  watch:{
     activeKey(now){
      if(this.menuList[now].children&&this.menuList[now].children.length>0){
          if(this.menuList[now].children[0].children&&this.menuList[now].children[0].children.length>0){
            this.$store.commit("changeMenuInfo", this.menuList[now].children[0].children[0]);
            this.active =this.menuList[now].children[0].children[0].id;

          }else{
            this.$store.commit("changeMenuInfo", this.menuList[now].children[0]);
            this.active =this.menuList[now].children[0].id;

          }


      }else{
      this.active = this.menuList[now].id;

        this.$store.commit("changeMenuInfo", this.menuList[now]);
      }
     }
  },
  methods: {
    checkMenu(item) {
      this.active = item.id;
      this.$store.commit("changeMenuInfo", item);
    },
    async getMenuList() {
      // let res = await userMenuAuth({ remark: "pvg_vehicle" });
      // this.menuList = res.data;
      if(localStorage.getItem('menuInfo')){
        this.active = JSON.parse(localStorage.getItem('menuInfo')).id
      }
    },
    flexibleChange(method) {
      let dom = this.$refs.flexible;
      if (method === "spread") {
        dom.style.width = "200px";
        this.isCollapse = false;
      } else {
        dom.style.width = "64px";
        this.isCollapse = true;
      }
    },
    
  },
};
</script>

<style lang="less" scoped>
.alarmRules {
  width: 100%;
  height: 100%;
  display: flex;
  .nav {
    height: 100%;
    display: flex;
    flex-direction: column;
    max-width: 200px;
    background: linear-gradient(0deg, #424491, rgba(33, 83, 143, 0.2));
    box-sizing: unset;
    .el-menu-vertical-demo {
      width: 100%;
      overflow: hidden;
    }
    .flexible {
      width: 199px;
      box-sizing: unset;
      height: 50px;
      // background: #1b2228;
      background: #313261;
      // display: flex;
      // justify-content: space-between;
      .method {
        width: 24px;
        height: 24px;
        float: right;
        margin-right: 15px;
        margin-top: 5px;
        img {
          width: 100%;
          height: 100%;
          cursor: pointer;
        }
      }
    }
    .el-menu {
      flex: 1;
    }
  }
  .content {
    flex: 1;
    width: calc(100% - 200px);
    background: #f0f2f5;
  }
}
.target {
  color: #f0f2f5;
  text-decoration: none;
  font-size: 14px;
}
.target:hover,
.target:visited,
.target:link,
.target:active {
  color: #f0f2f5;
}
</style>
